<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    xData = ["本年话务总量", "本年人工话务量", "每万客户呼入量",'每万客户呼入量'];
    yData = [2342, 1230, 425,900];
    option = {
        backgroundColor: '#061326',
        "grid": {
            "top": "25%",
            "left": "-5%",
            "bottom": "5%",
            "right": "5%",
            "containLabel": true
        },
        tooltip:{
            show:true
        },
        animation: false,
        "xAxis": [{
            "type": "category",
            "value": xData,
            "axisTick": {
                "alignWithLabel": true
            },
            "nameTextStyle": {
                "color": "#82b0ec"
            },
            "axisLine": {
                show: false,
                "lineStyle": {
                    "color": "#82b0ec"
                }
            },
            "axisLabel": {
                "textStyle": {
                    "color": "#fff"
                },
                margin: 30
            }
        }],
        "yAxis": [{
            show: false,
            "type": "value",
            "axisLabel": {
                "textStyle": {
                    "color": "#fff"
                },
            },
            "splitLine": {
                "lineStyle": {
                    "color": "#0c2c5a"
                }
            },
            "axisLine": {
                "show": false
            }
        }],
        "series": [{
            "name": "",
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            // "barWidth": "0",
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    // "formatter": "{c}%"
                    fontSize: 25,
                    fontWeight: 'bold',
                    color: '#34DCFF'
                }
            },
            color: "#2DB1EF",
            value: yData
        },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [40, 10],
                symbolOffset: [0, 7],
                // "barWidth": "20",
                z: 12,
                "color": "#2DB1EF",
                "value": yData
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [50, 15],
                symbolOffset: [0, 12],
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#2EA9E5',
                        borderType: 'solid',
                        borderWidth: 1
                    }
                },
                value: yData
            },        {
                name: '',
                type: 'pictorialBar',
                symbolSize: [50, 15],
                symbolOffset: [0, 12],
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#2EA9E5',
                        borderType: 'solid',
                        borderWidth: 1
                    }
                },
                value: yData
            },

            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [70, 20],
                symbolOffset: [0, 18],
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#19465D',
                        borderType: 'solid',
                        borderWidth: 2
                    }
                },
                value: yData
            },
            {
                type: 'bar',
                //silent: true,
                "barWidth": "40",
                barGap: '10%', // Make series be overlap
                barCateGoryGap: '10%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                            offset: 0,
                            color: "#38B2E6"
                        },
                            {
                                offset: 1,
                                color: "#0B3147"
                            }
                        ]),
                        opacity: .8
                    },
                },
                value: yData
            },{
                name: '日用气量分析',
                type: 'line',
                // smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 25,
                lineStyle: {
                    normal: {
                        color: "#6c50f3",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#6c50f3',
                    }
                },
                itemStyle: {
                    color: "#6c50f3",
                    borderColor: "#fff",
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: true
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(108,80,243,0.3)'
                        },
                            {
                                offset: 1,
                                color: 'rgba(108,80,243,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(108,80,243, 0.9)',
                        shadowBlur: 20
                    }
                },
                value: [2330, 205.97,2340,900 ]
            },
        ]
    };
    myChart.setOption(option);
</script>
